<template>
    <div class="intellect">
        <!-- <img :src="require('../../static/img/common/hideImg.png')" class="hideImg" @click="changeShow"> -->
        <div class="left" v-show="showHide">
            <div class="markBg">
                <div class="title title1">设备统计</div>
                <div class="parkNumBox">
                    <div class="parkNumItem">
                        <div class="top">
                            <span>{{facilityDatas.cameraSum}}</span>
                            <u>个</u>
                        </div>
                        <div class="bottom">摄像头设备</div>
                    </div>
                    <div class="parkNumItem">
                        <div class="top">
                            <span>{{facilityDatas.testEquipmentSum}}</span>
                            <u>个</u>
                        </div>
                        <div class="bottom">客源监测设备</div>
                    </div>
                </div>
                <div class="parkNumBox">
                    <div class="parkNumItem">
                        <div class="top">
                            <span>{{facilityDatas.onlineUnitSum}}</span>
                            <u>个</u>
                        </div>
                        <div class="bottom">巡检人员手持设备</div>
                    </div>
                    <div class="parkNumItem">
                        <div class="top">
                            <span>{{facilityDatas.falutFacilitySum}}</span>
                            <u>个</u>
                        </div>
                        <div class="bottom">故障设备</div>
                    </div>
                </div>
                <hr/>
                <div class="title title2">视频监控数据统计</div>
                <div class="lineTitle">
                    <span>今日视频监控事件TOP3</span>
                    <div>
                        <span class="emptyLine" style="width: 180px;"></span>
                        <!--<img src="../../static/img/common/dottedLine.png">-->
                        <img src="../../static/img/common/dian.png" class="dian">
                    </div>
                </div>
                <div class="pyramidBox">
                    <img src="../../static/intellect/img/pyramidIng.png">
                    <div>
                        <div class="titleName">
                            <span class="name1 titleName">摄像头名称</span>
                            <span class="name2 titleName">数量/件</span>
                        </div>
                        <div v-if="topArr.length > 0">
                            <div class="pItem"  v-for="(item,index) in topArr" :key="index">
                                <span class="name1">{{item.typeName}}</span>
                                <span class="name2">{{item.number}}</span>
                            </div>
                        </div>
                        <div class="pItem" v-else v-for="(item,index) in 3" :key="index">
                            <span class="name1">暂无</span>
                            <span class="name2">暂无</span>
                        </div>
                    </div>
                </div>
                <div class="lineTitle">
                    <span>近七天视频监控事件统计Top5</span>
                    <div>
                        <span class="emptyLine" style="width: 130px;"></span>
                        <!--<img src="../../static/img/common/dottedLine.png" style="width: 140px;">-->
                        <img src="../../static/img/common/dian.png" class="dian">
                    </div>
                </div>
                <div class="topCharts">
                    <div id="weekTop5" style="width: 100%;height: 100%;"></div>
                </div>
                <hr style="margin-top: 18px"/>
                <div class="title title3">今日巡检值班人员</div>
                <div class="peoplesBox">
                    <div class="duty clearfix">
                        <span class="duty1 fl" style="height: 30px">值班人员</span>
                        <div style="width: 100%;height: 75px;text-align: center;line-height: 75px;padding-top: 30px;" v-if="watchkeeperDatas.principalDay == '今日暂无值班人员'">
                            今日暂无值班人员
                        </div>
                        <div class="zhibanDiv" v-else>
                            <span v-for="(item,index) in watchkeeperDatas.watchkeeperDay" :key="index">{{item}}</span>
                        </div>
                        <!--<div style="display: flex; flex-wrap: wrap;justify-content: space-between;width: 100%;">-->
                            <!--<u>王某某</u><u>王某某</u><u>王某某</u><u>王某某</u><u>王某某</u>-->
                        <!--</div>-->
                        <!--<div style="display: flex; flex-wrap: wrap;width: 100%;justify-content: space-between;margin-top: 15px;">-->
                            <!--<u>王某某</u><u>王某某</u><u>王某某</u><u>王某某</u><u>王某某</u>-->
                        <!--</div>-->
                        <!--<div style="display: flex; flex-wrap: wrap;width: 100%;justify-content: space-between;margin-top: 15px;">-->
                            <!--<u>王某某</u><u>王某某</u><u>王某某</u><u>王某某</u><u>王某某</u>-->
                        <!--</div>-->
                    </div>
                </div>
                <hr style="margin:10px 0 0 0;"/>
                <div class="title title4"  @click="openWindow">今日安防事件数据<i class="threeBar" title="今日安防事件数据" ></i></div>
                <div class="botCharts">
                    <div id="dayDatas" style="width: 100%; height: 100%;position:absolute;top:-5px;left:0;"></div>
                    <div class="numStyle numStyle1">{{dayEventDatas.totalNumber}}</div>
                    <div class="numStyle numStyle2">件</div>
                    <div class="rateBox rateBox1">
                        <div style="margin-bottom:30px;width: 115px;" v-for="(item,index) in dayEventDatasList" :key="index">
                            <div>
                                <b>{{item.number}}</b><u>件</u>
                            </div>
                            <div>
                                <i :class="'icolor' + (index + 1)"></i><span>{{item.gardName}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottomBox" v-show="showHide">
            <div class="markBg">
                <div class="weekDatasBox">
                    <div class="title title4">近七天安防事件数据统计</div>
                    <div class="weekDatasTitle">
                        <i></i><span>近七天安防总事件数量</span><b>{{sevenAfToalNum}}</b>
                    </div>
                    <div id="weekDatas" style="width: 100%;height: 190px;"></div>
                </div>
                <div class="allDatasBox">
                    <div class="title title5">总安防事件统计</div>
                    <div id="allDatas" style="width: 100%;height: 222px;"></div>
                    <div class="numStyle numStyle1">{{afTotalNum}}</div>
                    <div class="numStyle numStyle2">件</div>
                    <div class="rateBox rateBox1">
                        <div style="width: 115px;margin-bottom: 15px;" v-for="(item,index) in afAllArr" :key="index">
                            <div style="line-height: 18px;margin-bottom: 4px;">
                                <b>{{item.number}}</b><u>件</u>
                            </div>
                            <div style="line-height: 12px;">
                                <i :class="'icolor' + (index + 1)"></i><span>{{item.typeName}}</span>
                            </div>
                        </div>
                        <!--<div style="margin-bottom: 15px;">-->
                            <!--<div style="line-height: 18px;margin-bottom: 4px;">-->
                                <!--<b>50</b><u>件</u>-->
                            <!--</div>-->
                            <!--<div style="line-height: 12px;">-->
                                <!--<i class="icolor2"></i><span>火警</span>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div style="width: 90px;margin-bottom: 15px;">-->
                            <!--<div style="line-height: 18px;margin-bottom: 4px;">-->
                                <!--<b>50</b><u>件</u>-->
                            <!--</div>-->
                            <!--<div style="line-height: 12px;">-->
                                <!--<i class="icolor3"></i><span>人员密度</span>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div>-->
                            <!--<div style="line-height: 18px;margin-bottom: 4px;">-->
                                <!--<b>50</b><u>件</u>-->
                            <!--</div>-->
                            <!--<div style="line-height: 12px;">-->
                                <!--<i class="icolor4"></i><span>人脸布控</span>-->
                            <!--</div>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
        </div>
        <!--点击按钮的隐藏数据-->
        <div class="left" v-if="!showHide">
            <div class="markBg">
                <div class="title title7">监控视频</div>
                <div class="videoBox" v-for="(item,index) in videoList" :key="index">
                    <span class="videoTitle">{{item.name}}</span>
                    <div :id="'ldplayer'+index" style="height:100%;"></div>
                </div>
            </div>
        </div>
        <div class="bottomBox bottomBox1" v-show="!showHide">
            <div class="markBg">
                <div class="videoBox" v-for="(item,index) in videoList2" :key="index">
                    <span class="videoTitle">{{item.name}}</span>
                    <div :id="'lldplayer'+index" style="height:100%;"></div>
                </div>
            </div>
        </div>
        <!--弹窗数据-->
        <div class="alertWindow" v-show="alertWindowShow" ref="windowBox">
            <div class="title">今日安防事件分析</div>
            <div class="windowBox clearfix">
                <span class="closeWindow" @click="closeWindow" title="关闭今日安防事件分析"></span>
                <div class="headTitle">
                    <span>名称</span>
                    <span>类型</span>
                    <span>时间</span>
                    <span>状态</span>
                </div>
                <div class="mainCon" v-for="(item,index) in tableData" :key="index">
                    <span>{{item.affairName}}</span>
                    <span>{{item.typeName}}</span>
                    <span>{{item.affairTime}}</span>
                    <span v-if="item.status == 1 || item.status == 2" class="noHandle">未处理</span>
                    <span v-if="item.status == 3">已处理</span>
                </div>
                <el-pagination layout="prev, pager, next" align="center" @current-change="handleCurrentChange" style="position: absolute;left: 0;bottom: 20px;right: 0;" :total="total">
                </el-pagination>
            </div>
        </div>

        <!-- 点位选择器 -->
        <all-marker ref="allMarker" :map-data="mapData"></all-marker>
    </div>
</template>

<script src="./intellect.js"></script>
<style lang="scss" src="./intellect.scss"></style>